<template>
    <div class="headtop">
        <div class="h1">
            <span class="img"><img src="https://zhyq.ailuquan.cn/website/assets/images/luquan/logo.png" alt="鹿泉区智慧企服融合平台"></span>
            <div class="h1_1">
                <svg viewBox="64 64 896 896" focusable="false" data-icon="bell" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M816 768h-24V428c0-141.1-104.3-257.8-240-277.2V112c0-22.1-17.9-40-40-40s-40 17.9-40 40v38.8C336.3 170.2 232 286.9 232 428v340h-24c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h216c0 61.8 50.2 112 112 112s112-50.2 112-112h216c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM512 888c-26.5 0-48-21.5-48-48h96c0 26.5-21.5 48-48 48z"></path></svg>
                <span><a>演示用户</a> | <a @click="logout">注销</a></span>
                <div class="searchdiv">
                    <input placeholder="输入关键字搜索" type="text" class="ant-input" v-model="obj.key" style="width: 220px;">
                    <a @click="search">搜索</a>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance,reactive } from 'vue'
let { proxy } = getCurrentInstance()
const props = defineProps({
})
let obj = reactive({
    key:"",
})

let logout = () => {
    sessionStorage.clear()
    proxy.routerPushMixin("/")
}
let search = () => {
    window.open("https://zhyq.ailuquan.cn/website/shijzslqqzf/heardsearch?gk="+obj.key)
}
</script>

<style lang="scss" scoped>
    .headtop {
        border-top: 3px solid #28a7e1;
        .h1 {
            height:102px; display: flex; margin: 0 auto; max-width: 1200px; min-width: 1200px; width: 100%; box-sizing: border-box; font-size:14px;
            .img { display: flex; align-items: center; }
            img { height: 84px; }
            .h1_1 {
                flex: 1; display: flex; justify-content: flex-end; align-items: center; 
                svg { margin-right:10px;}
                span a { margin:0 5px; }
                .searchdiv {
                    input { display:block; float:left; background: #fff; border: 1px solid #dcdcdc; height: 30px; margin-left: 10px; width: 156px!important; }
                    a { display:block; float:left; background: #1f71e0; color: #fff; height: 30px; line-height: 30px; text-align: center; width: 64px; }
                }
            }
        }
    }
</style>